<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <!--表单域<form>-->
    <!--url地址"action"(提交到的地址);提交方式"method";名称"name"-->
    <form action="demo.php" method="post" name="name1">
        <!--表单元素<input>-->
        <!--文本框"text"；默认值20字符-->
        <!--用户自定义规定input的值"value"-->
        用户名：<input type="text" name="username" value="请输入用户名"><br>
        <!--密码框"password"-->
        <!--规定输入字段中的字符的最大长度"maxlength"-->
        密码：<input type="password" name="password" maxlength="6"><br>
        <!--单选按钮"radio"；想要实现多选一，要将每个单选按钮的name属性设置成一样-->
        性别：
        <!--规定某个input元素首次加载时默认被选中-->
        <input type="radio" name="sex" checked="checked">男
        <input type="radio" name="sex">女<br>
        <!--复选框"checkbox"-->
        爱好：<input type="checkbox" name="hobby" value="绘画">绘画
        <input type="checkbox" name="hobby" value="唱歌">唱歌
        <input type="checkbox" name="hobby" value="跳舞">跳舞<br>
        <!--文件域"file",用于上传文件-->
        附件：<input type="file"><br><br>

        <!--<lable>绑定一个表单元素,点击<lable>内的文本时，浏览器会自动将光标转到（选择）对应的表单元素上，改善用户操作体验-->
        喜欢的动物：<input type="radio" name="animal" id="cat">
        <!--<lable>的for属性应该与相关元素的id相同-->
        <lable for="cat">小猫</lable>
        <input type="radio" name="animal" id="dog">
        <lable for="dog">小狗</lable>
        <input type="radio" name="animal" id="duck">
        <lable for="duck">小鸭子</lable><br><br><br>

        <!--下拉表单"select"-->
        籍贯：<select>
            <option>--请选择省份--</option>
            <option>北京</option>
            <option>天津</option>
            <option>河北</option>
        </select>
        <br><br>

        <!--提交按钮"submit",点击可以将form中的表单元素里的值提交给后台服务器-->
        <input type="submit" value="注册">
        <!--重置按钮"reset",点击按钮还原表单元素初始的默认状态-->
        <input type="reset" value="重新填写">
        <!--普通按钮"button",后期结合js搭配使用-->
        <input type="button" value="发送短信验证码"><br><br>


    </form>
</body>

</html>